<template>
  <el-dialog
    :title="type == 'add' ? '添加管理员或员工' : '修改管理员或员工'"
    v-model="visible"
    @close="handleClose"
  >
    <el-form
      :model="ruleForm"
      :rules="rules"
      ref="formRef"
      class="good-form"
      label-width="120px"
    >
      <el-form-item label="排序值" prop="users_id">
        <el-input
          v-model="ruleForm.users_id"
          style="width: 60%"
          :readonly="isReadOnly"
        />
      </el-form-item>
      <el-form-item label="用户名" prop="username">
        <el-input v-model="ruleForm.username" style="width: 60%" />
      </el-form-item>
      <el-form-item label="密码" prop="password">
        <el-input v-model="ruleForm.password" style="width: 60%" />
      </el-form-item>
      <el-form-item label="角色" prop="nickname">
        <el-select v-model="ruleForm.nickname" placeholder="角色">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="添加时间" prop="ctime" v-show="!isReadOnly">
        <el-date-picker
          v-model="ruleForm.ctime"
          type="datetime"
          placeholder="添加时间"
        />
      </el-form-item>
      <el-form-item label="修改时间" prop="utime" v-show="isReadOnly">
        <el-date-picker
          v-model="ruleForm.utime"
          type="datetime"
          placeholder="修改时间"
        />
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="visible = false">取 消</el-button>
        <el-button type="primary" @click="submitForm">确 定</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup>
import { getUsers, addUsers, updateUsers } from "../../api/users";
import { reactive, ref, toRefs, getCurrentInstance } from "vue";

const props = defineProps({
  type: String,
});

const { proxy } = getCurrentInstance();
const pictureUpload = ref(null);
const isReadOnly = ref(false);
const formRef = ref(null);
const state = reactive({
  // uploadImgServer,
  // token: localGet("token") || "",
  visible: false,
  ruleForm: {
    users_id: "",
    username: "",
    password: "",
    nickname: "",
    role: "",
    ctime: "",
    utime: "",
  },
  rules: {
    url: [{ required: "true", message: "图片不能为空", trigger: ["change"] }],
    sort: [{ required: "true", message: "排序不能为空", trigger: ["change"] }],
  },
  id: "",
  options: [
    {
      value: "管理员",
      label: "管理员",
    },
    {
      value: "员工",
      label: "员工",
    },
  ],
});

// 定义响应式数据
const { visible, ruleForm, rules, id, options } = toRefs(state);

// 开启弹窗
const open = (users) => {
  // 开启弹窗
  state.visible = true;
  // 判断是添加还是修改
  if (users) {
    // 修改
    state.ruleForm = {
      users_id: users.users_id,
      username: users.username,
      password: users.password,
      nickname: users.nickname,
      role: users.role,
      utime: users.utime,
    };
    isReadOnly.value = true;
  } else {
    // 添加
    state.ruleForm = {
      users_id: "",
      username: "",
      password: "",
      nickname: "",
      role: "",
      ctime: "",
    };
    isReadOnly.value = false;
  }
};
// 关闭弹窗
const close = () => {
  state.visible = false;
};
// 重置表单
const handleClose = () => {
  formRef.value.resetFields();
};

const emits = defineEmits(["changeTableData"]);
// 点击确定
const submitForm = () => {
  // 判断是添加还是修改
  if (!isReadOnly.value) {
    // 增加
    addUsers(proxy, state.ruleForm).then((data) => {
      if (data.code === 200) {
        // 更新视图
        getUsers(proxy).then((result) => {
          emits("changeTableData", result);
        });
      }
    });
  } else {
    // 修改
    updateUsers(proxy, state.ruleForm).then((data) => {
      if (data.code === 200) {
        // 更新视图
        getUsers(proxy).then((result) => {
          emits("changeTableData", result);
        });
      }
    });
  }
  // 关闭弹窗
  state.visible = false;
};

// 因为使用 script setup的组件是默认关闭的，也即通过模板 ref 或者 $parent 链获取到的组件的公开实例，不会暴露任何在 script setup 中声明的绑定。
// 为了在 script setup 组件中明确要暴露出去的属性，使用 defineExpose 编译器宏：
defineExpose({
  open,
});
</script>

<style scoped>
/* .avatar-uploader {
  width: 100px;
  height: 100px;
  color: #ddd;
  font-size: 30px;
}
.avatar-uploader-icon {
  display: block;
  width: 100%;
  height: 100%;
  border: 1px solid #e9e9e9;
  padding: 32px 17px;
} */
</style>
